<template>
  <a-modal
    v-model:visible="visible"
    title="批量备注"
    width="500px"
    title-align="start"
    align-center
    render-to-body
    :mask-closable="false"
    class="dmo-common-dialog"
    @close="closed"
  >
    <AdvancedForm
      ref="formRef"
      :items="mainForm"
      :initial-values="initialValues"
      :rules="mainFormRules"
    >
      <template #signUserCode="{ form }">
        <user
          v-model="form.signUserCode"
          v-model:name="signUserName"
          title="选择签订人"
        />
      </template>
    </AdvancedForm>

    <template #footer>
      <a-button @click="closed">{{ '取消' }}</a-button>
      <a-button type="primary" :disabled="importLoading" @click="save">{{
        '确认'
      }}</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits, nextTick } from 'vue';
  import AdvancedForm from '@/common/components/cac-components/advanced-forms/index.vue';
  import user from '@/common/components/search-modal/user.vue';
  import { Message } from '@arco-design/web-vue';
  import { eidtOrder } from '@/api/purchase-order/purchaseOrderPreparation';

  const emit = defineEmits(['closeDrawer', 'success']);
  const props = defineProps({
    rowData: {
      type: Object,
      default: null,
    },
  });
  const signUserName = ref('');
  const importLoading = ref<boolean>(false);
  const visible = ref(true);
  const formRef = ref();
  const initialValues = ref({});
  const mainForm = [
    {
      span: 24,
      type: 'text',
      labelText: '供方合同号',
      fieldName: 'splyContractNo',
    },
    {
      span: 24,
      type: 'other',
      labelText: '签订人',
      fieldName: 'signUserCode',
    },
    {
      span: 24,
      type: 'date',
      labelText: '签订日期',
      fieldName: 'signDateTime',
      format: 'YYYY-MM-DD',
      showTime: false,
    },
  ];
  const mainFormRules = {
    signUserCode: [{ required: true, message: '请选择' }],
    signDateTime: [{ required: true, message: '请选择' }],
  };

  onMounted(() => {
    nextTick(() => {
      formRef.value.setFormValues({ ...props.rowData });
      signUserName.value = props.rowData.signUserName;
    });
  });
  const save = async () => {
    const result = await formRef.value.formObject.validate();
    const formData: { [key: string]: any } = formRef.value.form;
    const params = { ...props.rowData, ...formData };
    params.signUserName = signUserName.value;
    if (!result) {
      const res: any = await eidtOrder(params);
      if (res.code === 200) {
        Message.success('签订信息更新成功');
        emit('success');
      }
    }
  };

  onMounted(() => {
    console.log('');
  });
  const closed = () => {
    emit('closeDrawer');
  };
</script>

<style lang="less">
  .dmo-common-dialog {
    .arco-modal-header {
      height: 56px;
      color: #1e2228;
    }

    .arco-modal-body {
      padding: 16px 24px;

      .arco-row {
        flex-direction: column;

        .arco-col {
          width: 100%;
        }
      }
    }

    .arco-modal-footer {
      padding: 9px 20px;
    }
  }
</style>
